<template>
	<view class="pay-page">
		<hs-status-bar type="capsule"></hs-status-bar>
		<top-bar :title="'支付订单'" :haveBack="true" direction="left" :backCallback="cancelPayment"></top-bar>
		<view class="info">
			<view class="timer">
				支付剩余时间： {{min>9?min:'0'+min}} : {{second>9?second:'0'+second}}
			</view>
			<view class="price">
				<text class="t1">￥</text><text class="t2">{{amount}}</text>
			</view>
			<view class="text">
				订单：{{orderId}}
			</view>
		</view>
		<view class="pay-type">
			<image class="icon" src="@/static/images/icon/wx.png" mode="aspectFit"></image>
			<text class="t1">微信支付</text>
			<view class="select">
				<view class="inner">

				</view>
			</view>
		</view>
		<view class="pay" @click="paymentOrder">
			确认支付
		</view>
	</view>
</template>

<script>
	import {
		payment
	} from "@/utils/utils.js";
	import {
		paymentOrder
	} from '@/api/product.js'
	export default {
		data() {
			return {
				amount: 0,
				orderId: null,
				min: 1,
				second: 59,
				timer: null,
			};
		},
		methods: {
			paymentOrder() {
				if (!this.orderId) return
				clearInterval(this.timer)
				paymentOrder({
					orderId: this.orderId
				}).then(res => {
					let data = res.data
					payment({
						"provider": data.provider,
						"nonceStr": data.nonceStr,
						"package": data.packageStr,
						"paySign": data.paySign,
						"signType": data.signType,
						"timeStamp": data.timestamp,
					}, () => {
						uni.setStorageSync('toOrderPage', true)
						setTimeout(() => {
							uni.switchTab({
								url: "/pages/my/my"
							})
						}, 1000)

					}, () => {
						uni.showToast({
							title: '你已取消支付',
							icon: 'error'
						});
						uni.setStorageSync('toOrderPage', true)
						setTimeout(() => {
							uni.switchTab({
								url: "/pages/my/my"
							})
						}, 1000)
					})
				})

			},
			cancelPayment() {
				clearInterval(this.timer)
				uni.switchTab({
					url: "/pages/my/my"
				})
			},
			// 支付倒计时
			countDown() {
				this.timer = setInterval(() => {
					this.second--
					if (this.min == 0 && this.second == 0) {
						console.log('订单取消');
						clearInterval(this.timer)
					} else
					if (this.second < 0) {
						this.min--
						this.second = 59
					}
				}, 1000)
			}
		},
		onLoad(e) {
			if (!e.orderId) {
				uni.switchTab({
					url: "/pages/index/index"
				})
			}
			this.orderId = e.orderId
			this.amount = e.amount
			this.min = Math.floor(e.time / 60)
			this.second = e.time % 60
			this.countDown()
		}
	}
</script>

<style lang="scss">
	.pay-page {
		.info {
			margin: 43.8rpx 0 14rpx;
			text-align: center;
			height: 175rpx;

			.timer {
				font-size: 28rpx;
				font-weight: 250;
			}

			.price {
				font-size: 70rpx;
				font-weight: 700;

				.t1 {
					font-size: 35rpx;
					font-weight: 600;
				}
			}

			.text {
				font-size: 31.5rpx;
				font-weight: 250;
			}
		}

		.pay-type {
			height: 136.5rpx;
			background: #fff;
			border-radius: 17rpx;
			margin: 0 43.8rpx 17rpx;
			display: flex;
			position: relative;

			.icon {
				height: 100%;
				width: 77rpx;
				margin-left: 23rpx;
			}

			.t1 {
				margin-left: 26rpx;
				line-height: 136rpx;
				font-size: 28rpx;
			}

			.select {
				float: right;
				height: 45.5rpx;
				width: 45.5rpx;
				border-radius: 50%;
				border: 1rpx solid #000;
				position: absolute;
				top: calc(50% - 22.5rpx);
				right: 40rpx;
				padding: 5rpx;

				.inner {
					height: 100%;
					width: 100%;
					background: #333;
					border-radius: 50%;
				}
			}
		}

		.pay {
			height: 96rpx;
			width: calc(100% - 87.6rpx);
			background: #333;
			color: #fff;
			border-radius: 17rpx;
			position: fixed;
			left: 50%;
			transform: translateX(-50%);
			bottom: 35rpx;
			text-align: center;
			line-height: 96rpx;
		}
	}
</style>